<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程</title> 

</head>
<body>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid red;">
    您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script>
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.moveTo(0,0);
        ctx.lineTo(200,100);
        ctx.stroke();
    </script>

    <canvas id="myCanvas1" width="200" height="100" style="border:1px solid blue;">
        您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script>
        var c=document.getElementById("myCanvas1");
        var ctx=c.getContext("2d");
        ctx.beginPath();
        ctx.arc(95,50,40,0,2*Math.PI);
        ctx.stroke();
    </script>

    <canvas id="myCanvas3" width="200" height="100" style="border:1px solid #008000;">
        您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script>

        var c=document.getElementById("myCanvas3");
        var ctx=c.getContext("2d");
        ctx.font="30px Arial";
        ctx.fillText("Hello World",10,50);
    </script>

    <canvas id="myCanvas4" width="200" height="100" style="border:1px solid #008000;">
        您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script>
        var c=document.getElementById("myCanvas4");
        var ctx=c.getContext("2d");
        // Create gradient
        var grd=ctx.createLinearGradient(0,0,200,0);
        grd.addColorStop(0,"red");
        grd.addColorStop(1,"white");

        // Fill with gradient
        ctx.fillStyle=grd;
        ctx.fillRect(10,10,150,80);
    </script>

</body>
</html>